<template>
    <el-container>
        <el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="search.name" :placeholder="$t('dept.name')" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="tableRef" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
                <el-table-column type="selection" align="center" width="30"></el-table-column>
				<el-table-column :label="$t('dept.name')" align="center" prop="name" width="150"></el-table-column>
				<el-table-column :label="$t('common.sort')" align="center" prop="sort" width="50"></el-table-column>
				<el-table-column :label="$t('common.status')" align="center" prop="status" width="150">
					<template #default="scope">
						<el-tag v-if="scope.row.status==1" type="success">{{ $t('common.enable') }}</el-tag>
						<el-tag v-if="scope.row.status==0" type="danger">{{ $t('common.disenabled') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('common.remark')" align="center" prop="remark" min-width="300"></el-table-column>
				<el-table-column :label="$t('common.time')" align="center" prop="create_at" width="180"></el-table-column>
				<el-table-column :label="$t('common.operate')" fixed="right" align="right" width="180">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">{{ $t('common.view') }}</el-button>
							<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">{{ $t('common.edit') }}</el-button>
							<el-popconfirm :title="$t('common.confirmRemove')" @confirm="table_del(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="primary" size="small">{{ $t('common.del') }}</el-button>
								</template>
							</el-popconfirm>
						</el-button-group>
					</template>
				</el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue';
import api from '@/api';
import i18n from '@/locales';
import { ElMessage, ElMessageBox } from 'element-plus';
import saveDialog from './save.vue';

// 定义响应式数据
const dialog = reactive({
    save: false,
});
const apiObj = ref(api.setting.dept.list);
const selection = ref([]);
const search = reactive({
    keyword: null,
});
const tableRef = ref(null);
const saveDialogRef = ref(null);
// 自定义添加部门的方法
const add = () => {
    dialog.save = true;
    nextTick(() => {
        saveDialogRef.value.open();
    });
};
// 自定义编辑部门的方法
const table_edit = (row) => {
    dialog.save = true;
    nextTick(() => {
        saveDialogRef.value.open('edit');
        saveDialogRef.value.setData(row);
    });
};
// 自定义查看部门的方法
const table_show = (row) => {
    dialog.save = true;
    nextTick(() => {
        saveDialogRef.value.open('show');
        saveDialogRef.value.setData(row);
    });
};
// 自定义删除部门的方法
const table_del = async (row) => {
    const reqData = {ids: [row.id]};
    const res = await api.setting.dept.delete.delete(reqData);
    if(res.code == 200) {
        tableRef.value.refresh();
        ElMessage.success(res.message);
    } else {
        ElMessage.error(res.message);
    }
};
// 自定义批量删除部门的方法
const batch_del = async () => {
    ElMessageBox.confirm(i18n.global.t('common.confirmDelete', { count: selection.value.length }), i18n.global.t('common.tip'), {
        type: 'warning',
    }).then(async () => {
        const ids = selection.value.map(item => item.id);
        const res = await api.setting.dept.delete.delete({ids});
        if (res.code == 200) {
            tableRef.value.refresh();
            ElMessage.success(res.message);
        } else {
            ElMessage.error(res.message);
        }
    })
};
// 自定义表格选择后回调事件的方法
const selectionChange = (val) => selection.value = val;
// 自定义搜索部门的方法
const upsearch = () => tableRef.value.upData(search);
// 自定义根据ID获取树结构的方法
const filterTree = (id) => {
    var target = null;
    const filter = (tree) => {
        tree.forEach(item => {
            if (item.id == id) {
                target = item;
            }
            if (item.children) {
                filter(item.children);
            }
        });
    };
    filter(tableRef.value.tableData);
    return target;
};
// 自定义本地更新数据的方法
const handleSaveSuccess = (data, mode) => {
    if (mode == 'add') {
        tableRef.value.refresh();
    } else if (mode == 'edit') {
        tableRef.value.refresh();
    }
};
</script>